<template>
<div v-perms="['Menu.list']">
  <div v-loading="result.loading">
    <div v-perms="['Menu.add']">
      <el-button type="primary" @click="handleAdd">
        <template #icon>
          <el-icon>
            <Plus/>
          </el-icon>
        </template>
      </el-button>
    </div>

    <div class="mt-2">
      <el-table :data="result.list" row-key="id">
        <el-table-column prop="id" label="ID" min-width="90" align="center"/>
        <el-table-column prop="name" label="名称" min-width="150" align="center"/>
        <el-table-column prop="type" label="类型" min-width="150" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.type === 1">目录</el-tag>
            <el-tag v-else-if="row.type === 2" type="success">菜单</el-tag>
            <el-tag v-else-if="row.type === 3" type="warning">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="图标" min-width="150" align="center">
          <template #default="{ row }">
            <i class="el-icon" v-if="row.icon">
              <component :is="row.icon"/>
            </i>
          </template>
        </el-table-column>
        <el-table-column prop="paths" label="路由地址" min-width="150" align="center"/>
        <el-table-column prop="component" label="组件" min-width="150" align="center"/>
        <el-table-column prop="perms" label="权限标识" min-width="150" align="center"/>
        <el-table-column prop="is_show" label="显示" width="70" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.is_show === 0" type="warning">否</el-tag>
            <el-tag v-else-if="row.is_show === 1" type="success">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_disable" label="状态" width="70" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.is_disable === 0" type="success">正常</el-tag>
            <el-tag v-else-if="row.is_disable === 1" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="90" align="center"/>
        <el-table-column prop="create_time" label="创建时间" min-width="170" align="center"/>
        <el-table-column prop="update_time" label="修改时间" min-width="170" align="center"/>

        <el-table-column label="操作" min-width="150" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)" v-perms="['Menu.edit']">
              编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(row.id)" v-perms="['Menu.del']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="flex justify-end mt-2">
      <Pagination :paging="paging"/>
    </div>
  </div>

  <edit-popup v-if="visible" v-model:visible="visible" ref="editRef" @success="handleSuccess"></edit-popup>
</div>
</template>

<script setup>

import {Plus} from "@element-plus/icons-vue";
import Pagination from '@/components/pagination/index.vue'
import {useList} from "@/hooks/useList";
import {list, edit, del} from '@/api/menu'
import {nextTick, onMounted, reactive, ref, shallowRef} from "vue";
import editPopup from './edit.vue'
import feedback from '@/utils/feedback'

const editRef = shallowRef(editPopup)
const visible = ref(false)
const searchData = reactive({
  name: '',
})

const {paging, result, getList, search, resetSearch} = useList({
  apiFun: list,
  params: searchData
})

const handleAdd = async () => {
  visible.value = true
  await nextTick()
  await editRef.value?.setFormData()
}

const handleEdit = async (row) => {
  visible.value = true
  await nextTick()
  await editRef.value?.setFormData(row, 'edit')
}

const handleDelete = async (id) => {
  await feedback.confirm('确认删除?')
  await del({ids: id})
  feedback.optionSuccess()
  getList()
}

const handleSuccess = async () => {
  visible.value = false
  getList()
  feedback.optionSuccess()
}

onMounted(() => {
  getList()
})

</script>

<style scoped>

</style>